/*
 * @param {String} src - 图片资源地址，必须使用绝对路径或网络路径
 * @param {String} width - 图片宽度，默认单位rpx，可设置px或%
 * @param {String} height - 图片高度，默认单位rpx，可设置px或%
 * @param {String} mode - 图片裁剪与缩放的模式，详见uni-app
 * @param {Boolean} fade - 是否开启图片加载完毕淡入效果
 * @param {Boolean} draggable - 鼠标长按是否能拖动图片
 * @param {String} radius - 图片 border-radius 圆角值，默认rpx单位
 * @param {String} zindex - 图片 z-index 层级，默认10
 */

/*
 * error - 图片加载失败时，显示的内容，默认空白不显示处理
 */

/*
 * @Tap - 点击图片触发，触发速度要快于 click 事件
 * @Long - 长按图片触发，可用于识别二维码（可用工具函数实现）等动作
 * @Load - 图片加载成功，加载失败不会触发
 * @Error - 图片加载失败，加载成功不会触发
 */

<template>
	<image
	v-if="show"
	:src="src"
	:mode="mode"
	:draggable="draggable"
	:style="[widthStyle, radiusStyle, zindexStyle]"
	:class="['uH5-image-default',
	fade ? 'uH5-image-load-fade' : 'uH5-image-load-nofade',
	]"
	@tap="Tap()"
	@longpress="Long()"
	@load="onLoadImg"
	@error="onErrorImg"
	></image>
	
	<view v-else>
		<slot name="error"></slot>
	</view>
</template>


<script>

import util from '../../libs/util/util.js'

export default {
	
	name: 'u-image',
	data() {
		return {
			
			// 是否显示图片
			show: true
			
		}
	},
	
	props: {
		
		src: {//图片资源地址
			type: String,
			default: ''
		},
		
		width: {//图片宽度
			type: String,
			default: '100%'
		},
		
		height: {//图片高度
			type: String,
			default: '100%'
		},
		
		mode: {//图片裁剪 缩放的模式
			type: String,
			default: 'scaleToFill'
		},
		
		fade: {//图片加载淡入显示效果
			type: Boolean,
			default: true
		},
		
		draggable: {//鼠标长按是否能拖动图片
			type: Boolean,
			default: true
		},
		
		radius: {//图片 border-radius 圆角值，默认rpx单位
			type: String,
			default: '0rpx'
		},
		
		zindex: {//图片 z-index 层级，默认10
			type: String,
			default: '10'
		}
		
	},
	
	watch:{
		
	},
	
	computed: {
		
		// 处理图片高度(加入单位)
		widthStyle: function(){
			let style = {}
			style.width = util.addCompany(this.width)
			style.height = util.addCompany(this.height)
			return style
		},
		
		// 处理图片圆角值(加入单位)
		radiusStyle: function(){
			let style = {}
			style.borderRadius = util.addCompany(this.radius)
			return style
		},
		
		// 处理图片z-index值
		zindexStyle: function(){
			let style = {}
			style.zIndex = this.zindex
			return style
		}
	},
	
	methods: {
		
		
		/*
		 * [Events] 图片长按事件
		 * @return void
		 */
		Long: function()
		{
			this.$emit('Long')
		},
		
		
		
		/*
		 * [Events] 图片点击事件
		 * @return void
		 */
		Tap: function()
		{
			this.$emit('Tap')
		},
		
		
		/*
		 * [加载] 图片加载事件
		 * 传递加载事件
		 * @return Object
		 */
		onLoadImg: function(res)
		{
			this.$emit('Load', res)
		},
		
		
		/*
		 * [错误] 图片加载失败
		 * 显示错误图片样式
		 * @return Object
		 */
		onErrorImg: function(err)
		{
			// 显示用户自定义加载失败区域
			this.show = !this.show
			this.$emit('Error', err)
		}
		
	}
	
}
</script>

<style lang="scss">

image{ will-change: transform }

// 基础样式
.uH5-image-default{
	width: 100%;
	height: 100%;
	opacity: 0;
}
// END


// 图片加载失败-error
.uH5-image-error-common{
	background: red;
	width: 200rpx;
	height: 200rpx;
}
// END


// 图片加载成功-load(淡入效果)
.uH5-image-load-fade{
	opacity: 1;
	animation-name: fade;
	animation-duration: 1s;//淡入时间
	animation-timing-function: linear;
	animation-direction: alternate;
}
// END


// 图片加载成功-load(拒绝淡入效果)
.uH5-image-load-nofade{
	opacity: 1;
}
// END


// 加载淡入动画
@keyframes fade{
	from{ opacity: 0 }
	to{ opacity: 1 }
}
// END

</style>